<template>
  <div class="svg-icon" :style="getStyle">
    <Icon :icon="icon" />
  </div>
</template>

<script setup lang="ts">
import { computed, CSSProperties } from 'vue'

import { Icon } from '@iconify/vue'

// 定义 Props 接口
interface Props {
  /** 颜色，可选属性，默认为空字符串 */
  color?: string
  /** 高度，可选属性，默认为 null */
  height?: null | number | string
  /** 图标，必需属性 */
  icon: string
  /** 宽度，可选属性，默认为 null */
  width?: null | number | string
}

defineOptions({ name: 'SvgIcon' })

// props
const props = withDefaults(defineProps<Props>(), {
  color: '',
  height: null,
  width: null
})

const getStyle = computed((): CSSProperties => {
  const { color, height, width } = props
  const s: any = {}
  if (color) {
    s.color = color
  }
  if (width) {
    s.width = `${`${width}`.replace('px', '')}px`
  }
  if (height) {
    s.height = `${`${height}`.replace('px', '')}px`
  }
  return s
})
</script>

<style lang="scss">
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  color: inherit;

  svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentcolor;
  }
}
</style>
